<template>
	<view class="search">
	
		<view class="box">
		
		 <uni-section title="热门公司" type="line" padding  >
		 	
		 	<u-grid :border="false" col="4"  >
		 		<u-grid-item v-for="listItem in companylist" :key="listItem.id"  @click='tocomdate'>
		 			<view class="imgs">
		 				<image :src="listItem.logo" mode=""></image>
		 			</view>
		 			<text class="grid-text">{{listItem.companyName}}</text>
		 		 </u-grid-item>
		 	</u-grid>
		 		
		 </uni-section>
		 
		 
		 <uni-section title="热门职位" type="line" padding  >
		 	
		 	<u-grid :border="false" col="4" >
		 		<u-grid-item v-for="(listItem,listIndex) in professionlist" :key="listItem.id">
		 			 <!-- <u-icon name="tags" color="#2979ff" size="28"></u-icon> -->
					 <view class="img">
					 	<image :src="listItem.url" mode=""></image>
					 </view>
					 
		 			<text class="grid-text">{{listItem.name}}</text>
		 		 </u-grid-item>
		 	</u-grid>
		 		
		 </uni-section>

		</view>
		
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {getprofession,getcompany} from '../../../api/jobApi.js'
import {jobclass,hotcom} from '@/mock/work.js'

const professionlist =ref([]) //职位列表
const companylist =ref([])  //公司列表
const show =ref(true)    //显示

//点击公司名字跳转
const tocomdate= (e)=>{
   let id =companylist.value[e].companyId
  uni.navigateTo({
  	url:'/pages/job/comde/comde?id='+id
  })

}

//获取公司列表
const getcompanylist=async()=>{
	let res =await getcompany({
		data:{}
	})
	
	if(res.code==200){
		companylist.value=res.rows
	}else{
		companylist.value =hotcom()
	}
	console.log(companylist.value);
}	
	
//点击查询职位
const professiondata =async(e)=>{
	
	let res = await getprofession({
		header:{
		 	'Authorization':uni.getStorageSync('token')
		},
		data:{},
		
	})
	if(res.code==200){
	  professionlist.value=res.rows		
	}else{
		//模拟数据
		professionlist.value=jobclass()	
	}
	console.log(professionlist.value);
}
		
onMounted(()=>{
	professiondata();
	getcompanylist()
})
</script>

<style lang="scss">
	
	.search{
	
	.u-grid-item{
	padding: 6px 0px;
	
	.imgs{
	width: 60px;
	height: 30px;
	
		image{
			width: 100%;
			height:100%;
		}
	}
	
	

	.img{
		width: 30px;
		height: 30px;
		
		image{
			width: 100%;
			height:100%;
		}
	}
		
	.grid-text{
		width: 100%;
		font-size: 12px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		
		
	}
		
	}
		
		
	}
	
	
</style>
